<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useMouse } from "../utils/mouse";
import { getNumber } from "../utils/util";
import {emitter } from "../core/eventBus";
import Nav from "../components/Nav.vue";
import Silder from "../components/Silder.vue";
import Item from "../components/Item.vue";
import Progress from "../components/TopProgress.vue";


// --主题
const theme=ref('dark')
const instance = getCurrentInstance();
console.log(instance);
const { x, y } = useMouse();
import { useCounterStore } from "../store/index";
const counter = useCounterStore();
console.log(counter);
const show = ref(true);
const msg = ref("hello");
const text = ref("11");
//const a = utils.getText('hehe')
const b = getNumber();
console.log(b);

onMounted(() => {
  emitter.emit('message', 'Hello from Publisher!');
  console.log(typeof null);
  console.log(Object.prototype.toString.call(null)); // "[object Null]"
});
console.log(navigator.userAgent);
</script>
<template>
  <Progress></Progress>
  <header :data-theme="theme" class=" p-4 bg-blue-500 text-white">
    <Nav :msg="'我是首页'"></Nav>
  </header>
  <div class="dflex">
    <div class="slide">
      <Silder></Silder>
    </div>
    <div class="content">
      <!-- 图片的响应式 -->
      <button @click="theme = theme === 'dark' ? 'light' : 'dark'" class="btn">切换主题</button>
      <div>
        <img
          src="../assets/images/dea729-small.jpg"
          srcset="
            ../assets/images/dea729-medium.jpg  768w,
            ../assets/images/dea729-large.jpeg 1024w
          "
          sizes="(max-width: 767px) 100vw, (max-width: 1024px) 50vw, 100vw"
        />
      </div>
      <picture>
        <source
          srcset="../assets/images/dea729-large.jpeg"
          media="(min-width: 1024px)"
        />
        <source
          srcset="../assets/images/dea729-medium.jpg"
          media="(min-width: 768px)"
        />
        <img
          srcset="../assets/images/dea729-small.jpg"
          alt="Responsive image"
        />
      </picture>
      <!-- -- -->
      <input v-focus />
      <MilongUI></MilongUI>
      <h1>index <br />{{ msg }}</h1>
      Mouse position is at: {{ x }}, {{ y }}
      <h1>{{ text }}</h1>
      <div style="height: 1px; background-color: red"></div>
      <!-- <div>{{ $translate('greetings.hello') }}</div> -->
      <button @click="show = !show">Toggle</button>
      <Transition>
        <p v-if="show">hello</p>
      </Transition>
      <div v-for="i in 100" :key="i">
        <Item></Item>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
header[data-theme="dark"] {
  background-color: #ccc;
}
</style>
